<template>
  <div id="app">
    <el-container>
      <el-aside width="220px">
        <el-menu :default-openeds="['1']" @select="handleSelect" :default-active="activePart">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-location"></i>IP段</template>
            <el-menu-item v-for="item in partitions" :index="item.part">
              {{ item.part }} <span class="ip-available">(空闲:{{ item.status.available }})</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <el-row>
          <el-col :span="2" style="text-align:right"> 筛选: </el-col>
          <el-col :span="12" :offset="1">
            <el-radio-group v-model="status">
              <el-radio v-for="item in statusDesc" :label="item.value">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="6">
            更新时间: {{ part.updatetime }}
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="24">
            <div v-for="item, index in ips" class="ip-block" :class="[ ((index + 1) % 10) || 'ip-block-cut' ]">
              <div :class="[ item.status ]">{{ item.ip }}</div>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      status: 'all',
      partitions: [],
      part: {},
      statusDesc: [{
        name: '全部',
        value: 'all'
      },{
        name: '空闲',
        value: 'available'
      }]
    }
  },
  mounted () {
    this.$axios({
      method: 'get',
      url: '/api/partition'
    }).then(response => {
      console.log(response)
      this.$set(this, 'partitions', response.data)
      this.queryPart(response.data[0].part)
    }).catch(e => {
        this.$message({
          type: 'error',
          message: `查询 ip段 失败: ${e}`
        })
    })
  },
  methods: {
    handleSelect(key, keyPath) {
      this.queryPart(key)
    },
    queryPart (part) {
      return this.$axios({
        method: 'get',
        url: '/api/partition/' + part
      }).then(response => {
        console.log(response.data)
        this.$set(this, 'part', response.data)
      }).catch(e => {
        this.$message({
          type: 'error',
          message: `查询 可用ip 失败: ${e}`
        })
      })
    }
  },
  computed: {
    ips () {
      return this.status === 'all' ? this.part.ips : this.part.ips.map(x => {
        return {
          status: x.status === this.status ? x.status : 'hide',
          ip: x.ip
        }
      })
    },
    activePart () {
      return this.partitions.length && this.partitions[0].part
    }
  }
}
</script>

<style>
.ip-available{
  color: #999;
}
.ip-block {
  width: 3%;
  height: 30px;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  margin: 5px 1% 5px 0.5%;
  float: left;
}
.ip-block-cut {
  margin-right: 4%;
}
.available {
  background-color: #67C23A;
}
.used {
  background-color: #F56C6C;
}
.disable {
  background-color: #909399;
}
.hide {
  display: none;
}
</style>
